<template>
  <div class="container">
    <!-- 预览 组件 -->
    <h2 style="margin: 0px">{{ data.title }}</h2>
    <div>
      <span class="span-i-style">{{ data.createTime | formTime }}</span>
      <span class="span-i-style">{{ data.username }}</span>
      <i class="el-icon-view span-i-style" />
      <span class="span-i-style">{{ data.visits }}</span>
    </div>
    <div ref="box" class="textarea-style box" v-html="data.articleBody" />
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/articles'
import * as dayjs from 'dayjs'
import * as isLeapYear from 'dayjs/plugin/isLeapYear' // import plugin
import 'dayjs/locale/zh-cn' // import locale

dayjs.extend(isLeapYear) // use plugin
dayjs.locale('zh-cn') // use locale
export default {
  filters: {
    // 过滤器 更改数据样式
    formTime(time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  props: {
    articlesobj: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      asdasd: [],
      data: { // 预览数据

        title: '',
        createTime: '',
        articleBody: '',
        creatorID: '',
        id: '',
        state: '',
        videoURL: null,
        visits: ''
      }

    }
  },
  // 初始填入数据
  created() {
    this.detailArticle()
  },
  updated() {
    const boxwidth = this.$refs.box.clientWidth

    const img = document.querySelectorAll('.box p img')

    img.forEach(item => {
      const imgwidth = item.naturalWidth

      if (imgwidth > boxwidth) {
        item.style.width = '100%'
      }
    })
  },
  methods: {
    // 预览回填数据
    async detailArticle() {
      const res = await detail({ id: this.articlesobj.id })
      this.data = res.data
      // console.log(this.articlesobj.username)
      this.data.username = this.articlesobj.username
    }
  }
}
</script>

<style scoped lang='less'>
.span-i-style {
  // margin: 10px 10px;
  margin-right:10px;
  margin-top: 10px;
 margin-bottom: 10px;
}
.textarea-style{
  width: 100%;
 border-top: 1px dashed #cccccc;
  background-color: #f5f5f5;
   padding: 20px 10px 30px;
}

</style>
